<script setup lang="ts">
import {ref} from 'vue';
import {Toast} from 'vant';
import {useUserStore} from "@/store/user";
import {createTeam} from "@/api/team";
import router from "@/router";

const onClickLeft = () => history.back()
const user = useUserStore()


const team = ref({
  teamName: '',
  password: '',
  description: '',
  maxPerson: 3,
  expireTime: +new Date((new Date()).setHours(24, 0, 0, 0)),
  userId: user.id,
  status: 0
});


//截止日期
const result = ref('');
const showCalendar = ref(false);
const onConfirm = (date) => {
  team.value.expireTime = Date.parse(date)
  showCalendar.value = false;
};

const onSubmit = async () => {
  if(!team.value.userId)
  {
    Toast.fail('请先登录');
    return;
  }
  console.log("team,", team.value)
  await createTeam(team.value.teamName, team.value.password, team.value.description, team.value.maxPerson, team.value.expireTime, team.value.userId, team.value.status)
  router.push('/team')

};
</script>
<template>
  <van-nav-bar
      :title="$route.name"
      left-arrow
      @click-left="onClickLeft"
  />
  <van-form @submit="onSubmit">
    <van-cell-group>
      <van-field
          v-model="team.teamName"
          label="队伍名称"
          placeholder="请输入队伍名称"
          :rules="[{ required: true, message: '请输入队伍名称' }]"
      />
      <van-field
          v-model="team.description"
          rows="4"
          autosize
          label="队伍描述"
          type="textarea"
          placeholder="请输入队伍描述"
      />

      <van-field
          v-model="team.expireTime"
          is-link
          readonly
          name="calendar"
          label="截止日期"
          placeholder="点击选择日期"
          @click="showCalendar = true"
      />
      <van-calendar v-model:show="showCalendar" @confirm="onConfirm"/>

      <van-field name="stepper" label="最大人数">
        <template #input>
          <van-stepper v-model="team.maxPerson" max="10" min="3"/>
        </template>
      </van-field>

      <van-field name="radio" label="队伍类型">
        <template #input>
          <van-radio-group v-model="team.status" direction="horizontal">
            <van-radio :name="0">公开</van-radio>
            <van-radio :name="1">私有</van-radio>
            <van-radio :name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
          v-if="team.status === 2"
          v-model="team.password"
          type="password"
          label="队伍密码"
          placeholder="请输入队伍密码"
          :rules="[{ required: true, message: '请填写队伍密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>


<style scoped>

</style>
